<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .layout.grail .left-center-right {
            padding: 0 300px;
            /* min-width: 304px; */
        }

        .layout.grail .left-center-right>div {
            float: left;
            min-height: 100px;
        }

        .layout.grail .center {
            background: yellow;
        }

        .layout.grail .left {
            margin-left: -100%;
            width: 300px;
            background: red;
            position: relative;
            left: -300px;
        }

        .layout.grail .right {
            margin-left: -300px;
            width: 300px;
            background: blue;
            position: relative;
            right: -300px;
        }
    </style>


</head>

<body>
    <section class="layout grail">
        <h1>圣杯布局</h1>
        <article class="left-center-right">
            <div class="center">
                1.这是三栏布局的圣杯布局解决方案；
                2.这是三栏布局的圣杯布局解决方案；
                3.这是三栏布局的圣杯布局解决方案；
                4.这是三栏布局的圣杯布局解决方案；
                5.这是三栏布局的圣杯布局解决方案；
                6.这是三栏布局的圣杯布局解决方案；
                7.这是三栏布局的圣杯布局解决方案；
                8.这是三栏布局的圣杯布局解决方案；
                9.这是三栏布局的圣杯布局解决方案；
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </article>
    </section>

</body>
</body>

</html>